<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>凯盛项目管理系统</title>
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <link rel = "Shortcut Icon" href="http://www.kaishengit.com/favicon.ico" />
	<script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css">
        .input-xlarge{
            width:460px;
        }
    </style>
</head>
<body>
	<div class="container">
		<div class="navbar">
			<div class="navbar-inner">
				<div class="container">
					<a href="main" class="brand">凯盛项目管理系统</a>
					<ul class="nav pull-right">
						<li class="active">
							<a>${sessionScope.user.name }</a>
						</li>
						<li>
							<a href="user">个人资料</a>
						</li>
						<li class="divider-vertical"></li>
						<li>
							<a href="loginout">安全退出</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
        
        <form class="form-horizontal" id = "myform" action="main?m=new" method="post">
            <fieldset>
                <legend>开始一个新项目</legend>
                <div class="control-group" id = "namediv">
                    <label class="control-label" for="project_name">项目名称</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="project_name" name="project_name">
                        <p class="help-block" id ="pname">请输入项目名称</p>
                    </div>
                </div>
                <div class="control-group" id ="detaildiv">
                    <label class="control-label" for="project_details">项目描述</label>
                    <div class="controls">
                        <textarea name="project_details" id="project_details" rows="8" class="input-xlarge"></textarea>
                        <p class="help-block">请输入项目的详细描述</p>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="project_owner">负责人</label>
                    <div class="controls">
                        <select name="project_owner" id="project_owner">
                            <c:forEach var="user" items="${users }">
                            	<option value="${user.id }">${user.name }</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="project_person">项目成员</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="project_person" name="project_person">
                        <p class="help-block">请输入项目成员，以空格分隔开</p>
                    </div>
                </div>
                <div class="form-actions">
                    <button class="btn btn-primary" id="btn" type="button" disabled="disabled">保存</button>
                    <a href="main" class="btn">返回</a>
                </div>
            </fieldset>
        </form>
    </div>
    <script type="text/javascript">
    	$(document).ready(function(){
    		 $("#project_name").focus(function() {
                $("#namediv").removeClass("error");
            });
            $("#project_name").blur(function() {
                var name = $(this).val();
                if (name.trim() == "") {         
                    $("#namediv").addClass("error");
                } else {
	                $.get("project?m=name&name=" + name,function(result) {     	
	                	if(result == 0){
	                		$("#pname").text("项目名可用");
	                		$("#btn").removeAttr("disabled");
	                	} else {
	                		$("#pname").text("项目名已被占用！");
	                    	$("#namediv").addClass("error");
	                    	$("#btn").attr("disabled","disabled");
	                	} 
                	});
               	} 
            });
            $("#project_details").focus(function() {
                $("#detaildiv").removeClass("error");
            });
            $("#project_details").blur(function() {
                var detail = $(this).val();
                if (detail == "") {
                    $("#detaildiv").addClass("error");
                }
            });
            $("#btn").click(function() {
                var name = $("#project_name").val();
                var detail = $("#project_details").val();
                if (name.trim() == ""){
                    $("#namediv").addClass("error");
                }
                if (detail == "") {                
                    $("#detaildiv").addClass("error");
                }
                if (name.trim() != "" && detail != "") {
                    $("#myform").submit();
                }
            });
    	});
    </script>
</body>
</html>